<template>
  <MainLayout>
    <router-view></router-view>
    <div class="product-specification-management">
    <h2>商品规格管理</h2>
    
    <!-- 添加商品表单 -->
    <el-form :inline="true" class="add-product-form">
      <el-form-item label="商品名称">
        <el-input v-model="newProduct.name" placeholder="请输入商品名称" />
      </el-form-item>
      <el-form-item label="商品价格">
        <el-input v-model="newProduct.price" placeholder="请输入商品价格" />
      </el-form-item>
      <el-form-item label="商品库存">
        <el-input v-model="newProduct.stock" placeholder="请输入商品库存" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addProduct">添加商品</el-button>
        <el-button type="danger" :disabled="selectedProducts.length === 0" @click="batchDelete">批量删除</el-button>
      </el-form-item>
    </el-form>

    <!-- 商品列表 -->
    <el-table
      :data="paginatedProducts"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="ID" width="100" />
      <el-table-column prop="name" label="商品名称" />
      <el-table-column prop="price" label="商品价格" />
      <el-table-column prop="stock" label="商品库存" />
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button size="small" @click="editProduct(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="deleteProduct(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      class="pagination"
      background
      layout="prev, pager, next"
      :total="products.length"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="handlePageChange"
    />

    <!-- 编辑商品模态框 -->
    <el-dialog v-model="isEditing" title="编辑商品" width="30%">
      <el-form :model="editingProduct">
        <el-form-item label="商品名称">
          <el-input v-model="editingProduct.name" />
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input v-model="editingProduct.price" />
        </el-form-item>
        <el-form-item label="商品库存">
          <el-input v-model="editingProduct.stock" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="cancelEdit">取消</el-button>
        <el-button type="primary" @click="saveEdit">保存</el-button>
      </template>
    </el-dialog>
  </div>
  </MainLayout>

</template>

<script>
import MainLayout from '@/layouts/MainLayout.vue'
export default {
  components: {
    MainLayout
  },
  data() {
    return {
      products: [
        { id: 1, name: '商品A', price: 100, stock: 50 },
        { id: 2, name: '商品B', price: 200, stock: 30 }
      ],
      newProduct: {
        name: '',
        price: '',
        stock: ''
      },
      isEditing: false,
      editingProduct: {
        id: null,
        name: '',
        price: '',
        stock: ''
      },
      currentPage: 1,
      pageSize: 5,
      selectedProducts: []
    };
  },
  computed: {
    paginatedProducts() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.products.slice(start, end);
    }
  },
  methods: {
    addProduct() {
      if (this.newProduct.name && this.newProduct.price && this.newProduct.stock) {
        this.products.push({
          id: this.products.length + 1,
          ...this.newProduct
        });
        this.newProduct = { name: '', price: '', stock: '' };
      }
    },
    editProduct(product) {
      this.isEditing = true;
      this.editingProduct = { ...product };
    },
    saveEdit() {
      const index = this.products.findIndex(p => p.id === this.editingProduct.id);
      if (index !== -1) {
        this.products.splice(index, 1, this.editingProduct);
      }
      this.cancelEdit();
    },
    cancelEdit() {
      this.isEditing = false;
      this.editingProduct = { id: null, name: '', price: '', stock: '' };
    },
    deleteProduct(productId) {
      this.products = this.products.filter(product => product.id !== productId);
    },
    handlePageChange(page) {
      this.currentPage = page;
    },
    handleSelectionChange(selection) {
      this.selectedProducts = selection;
    },
    batchDelete() {
      this.$confirm('确定要删除选中的商品吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = this.selectedProducts.map(product => product.id);
        this.products = this.products.filter(product => !ids.includes(product.id));
        this.selectedProducts = [];
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
  beforeUnmount() {
    console.log('Component is about to be unmounted');
    this.isEditing = false;
    this.editingProduct = { id: null, name: '', price: '', stock: '' };
    this.selectedProducts = [];
  },
  unmounted() {
    console.log('Component has been unmounted');
  }
};
</script>

<style scoped>
.product-management {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 30px;
  background-color: #fff;
  padding-bottom: 100px;
}

.pagination {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30px;
  margin-top: 24px;
  justify-content: center;
  padding: 16px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.el-dialog {
  border-radius: 8px;
}

.el-dialog__header {
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
  border-radius: 8px 8px 0 0;
  padding: 16px;
}

.el-dialog__body {
  padding: 20px;
}

.el-dialog__footer {
  padding: 16px;
  border-top: 1px solid #ebeef5;
  background-color: #f5f7fa;
  box-shadow: none;
}

.product-management h2 {
  margin-top: 10px;
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 500;
  text-align: left;
}
</style>